<template>
	<view class="cart container">
		<view class="tip">
			请及时提交订单，商品数量有限可能很快就被抢完了
		</view>
		<view class="cart-box">
			<view class="selectAll">
				<checkbox-group @change="checkboxAll">
					<label class="checkbox">
						<checkbox value="" :checked="selectAll"/>
						<text>全选</text>
					</label>
				</checkbox-group>
			</view>
			<view class="shop-list">
				<!-- 一项商品 左滑删除事件 -->
				<checkbox-group @change="checkboxChange">
				<view class="shop"
					v-for="(item, i) in cartList" :key="i"
					:ref="'remove'+i"
					:style="deleteSlider[i]"
					@touchstart='touchStart(i, $event)'
					@touchmove='touchMove(i, $event)'
					@touchend='touchEnd(i, $event)'>
					<view class="shop-cont">
						<view class="shop-top">
							<view class="item-l">
								<label class="checkbox">
									<checkbox :value="item.cartId+''" :checked="item.checked" />
								</label>
							</view>
							<view class="item-i">
								<image :src="item.commodityPicture" mode=""></image>
							</view>
							<view class="item-c">
								<view class="text1">{{item.commodityName}}</view>
								<view class="text2">{{item.optionName}}</view>
								<view>¥{{item.marketingPrice}} <text class="text-line">¥{{item.marketPrice}}</text></view>
							</view>
							<view class="item-r">
								12/12 08:00 结束
							</view>
						</view>
						<view class="shop-bottom">
							<view class="bottom-l">该商品限购5件</view>
							<view class="bottom-r">
								<uni-number-box :min="1" v-on:change="onNumberChange($event, item.cartId)" :value="item.amount" type="cart"></uni-number-box>
							</view>
						</view>
					</view>
					<view class="shop-delete" @click="deleteCart(item.cartId)">
						删除
					</view>
				</view>
				</checkbox-group>
			</view>
			<view class="cartab">
				<cartTabbar index="3" :priceAmount="priceAmount" :productList="productList"></cartTabbar>
			</view>
		</view>
	</view>
</template>

<script>
	import cartTabbar from '../../components/cartTabbar.vue'
	import uniNumberBox from '../../components/uni-number-box.vue'
	import Api from '../../util/api.js'
	export default {
		components: {
			cartTabbar,
			uniNumberBox,
		},
		data() {
			return {
				cartList:[],
				selectAll: false,
				selectList:[],
				productList:[], //选中待结算数组
				priceAmount:0,//选中待结算金额
				initX: 0, //触摸位置
				moveX: 0, //滑动时的位置
				x: 0, //移动距离
				objX: 0,//目标对象位置
				obj:'', //目标对象
				deleteSlider: [],
			};
		},
		onLoad() {
			this.initData();
		},
		methods:{
			/* 获取购物车列表 */
			initData(){
				Api.fetchPost('/fsbus/M2207',{}).then(res=>{
					if(res.errorNo == 0){
						this.cartList = res.results.data;
						for (let i = 0; i < this.cartList.length; i++) {
							this.cartList[i].checked = false;
							this.deleteSlider[i] = 'transform:translateX(0px)';
						}
						uni.setNavigationBarTitle({
								title: '购物车('+this.cartList.length+')'
						});
						
					}
				}).catch(err=>{})
			},
			//购物车数量加减
			onNumberChange(i,cartId){
				Api.fetchPost('/fsbus/M2208',{cartId:cartId, amount:i}).then(res=>{
				}).catch(err=>{})
			},
			/* 从购物车中删除 */
			deleteCart(id){
				Api.fetchPost('/fsbus/M2210',{cartId:id}).then(res=>{
					if(res.errorNo == 0){
						uni.showToast({
								title: '删除成功',
								duration: 2000
						});
						this.initData();
					}
				}).catch(err=>{})
			},
			// 全选
			checkboxAll(ev){
				let len = ev.detail.value.length;
				this.selectList = [];
				for(let i=0; i<this.cartList.length;i++){
					if(len==1){
						this.cartList[i].checked= true;
						this.selectAll = true;
						this.selectList.push(this.cartList[i].cartId);
					}else {
						this.selectAll = false;
						this.cartList[i].checked= false;
					}
					this.$set(this.cartList, i, this.cartList[i]);
				}
				this.getOrderData();
			},
			checkboxChange(ev){
				let len = ev.detail.value.length;
				if(len == this.cartList.length){
					this.selectAll = true;
				}else {
					this.selectAll = false;
				}
				this.selectList = ev.detail.value;
				this.getOrderData();
			},
			
			getOrderData(){
				this.productList = [];
				this.priceAmount = 0;
				for(let i=0; i< this.selectList.length;i++){
					for (let j = 0; j < this.cartList.length; j++) {
						if(this.selectList[i] == this.cartList[j].cartId){
							var params = {};
							params.commodityId = this.cartList[j].commodityId;
							params.commoditySpecId = this.cartList[j].commoditySpecId;
							params.commoditySpecValue = this.cartList[j].optionName;
							params.buyAmount = this.cartList[j].amount;
							params.marketingPrice = this.cartList[j].marketingPrice;
							params.cartId = this.cartList[j].cartId;
							params.commodityName = this.cartList[j].commodityName;
							params.commodityPicture = this.cartList[j].commodityPicture
							this.productList.push(params);
							this.priceAmount += this.cartList[j].marketingPrice*this.cartList[j].amount
						}
					}
				}
			},
			/* 左滑删除 */
			touchStart(index,ev){
				this.initX = 0;
				this.moveX = 0;
				this.x = 0;
				this.objX = 0;
				for (let i = 0; i < this.deleteSlider.length; i++) {
					this.deleteSlider[i] = 'transform:translateX(0px)';
				}
				this.obj = this.$refs['remove'+index];
				//tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
				if(ev.touches.length == 1){
						// 记录开始位置
						this.initX = ev.touches[0].clientX;
					}
			},
			touchMove(index,ev){
				this.moveX = ev.touches[0].clientX;
				this.x = this.moveX - this.initX;
				if(this.x > -25){
					return false;
				}
				if (this.x >= 0) {
					this.$set(this.deleteSlider, index, "transform:translateX(0px)")
				} else if (this.x < 0) {
					var l = Math.abs(this.x);
					this.$set(this.deleteSlider, index, "transform:translateX("+ -l +"px)")
					if (l > 80) {
						l = 80;
						this.$set(this.deleteSlider, index, "transform:translateX("+ -l +"px)")
					}
				}
			},
			touchEnd(index,ev){
				this.objX = this.x;
				if (this.objX > -40) {
					this.$set(this.deleteSlider, index, "transform:translateX(0px)")
					this.objX = 0;
				} else {
					this.objX = -80;
					this.$set(this.deleteSlider, index, "transform:translateX("+-80+"px)")
				}
			}
		},
	}
</script>

<style>
	.cart {
		font-size: 24upx;
		overflow-x: hidden;
	}
	.tip {
		width: 100%;
		line-height: 61upx;
		background-color: #656565;
		color: #fff;
		overflow: hidden;
		padding: 0 20upx;
	}

	.selectAll {
		width: 100%;
		height: 76upx;
		line-height: 76upx;
		padding: 0 20upx;
		margin: 10upx 0;
	}

	.selectAll text {
		margin-left: 20upx;
	}
	.shop {
		background-color: #EFEFEF;
		border-bottom: 1px solid #dedddd;
		position: relative;
		-webkit-transform: translateX(0px);
		min-height: 100upx;
		transition: .2s transform,
	}
	.shop:last-child {
		border-bottom: none;
	}
	.shop .shop-top {
		padding: 20upx;
		display: flex;
	}
	.shop .shop-top:last-child {
		border-bottom: 0;
	}
	.shop .item-l {
		width: 70upx;
		line-height: 150upx;
	}

	.shop .item-i {
		width: 150upx;		margin-right:20upx;
	}

	.shop .item-i image {
		width: 150upx;
		height: 150upx;
		background-color: #A2A2A2;
	}
	.shop .item-c {
		flex: 1;
	}
	.shop .item-r {
		width: 200upx;
		display: flex;
		align-items: flex-end;
		padding-bottom: 10upx;
	}
	.shop-delete {
		position: absolute;
		top: 0;
		right: -80px;
		text-align: center;
		background-color: #F52A4C;
		color: #fff;
		width: 80px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.text1 {
		font-size: 24upx;
		color: #333333;
		height: 80upx;
	}

	.text2 {
		color: #666666;
		font-size: 22upx;
	}

	.text-price {
		color: #2E2E2E;
		font-size: 30upx;
		color: #2E2E2E;
	}

	.text-line {
		text-decoration: line-through;
		font-size: 24upx;
		color: #666666;
	}
	.shop-bottom {
		display: flex;
		padding-bottom: 20upx;
	}
	.shop-bottom .bottom-l {
		padding-left: 100upx;
		flex: 1;
		line-height: 53upx;
	}
	.shop-bottom .bottom-r {
		width: 220upx;
	}
</style>
